/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="">
		<view class="head">
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class='head-img' @click='back'>
				<image src="/static/fanhui-black.png" mode=""></image>
			</view>
			<text>选择住客</text>
		</view>
		<view class="renyuan-area">
			<view class="renyuan-item">
				<view class="add-box" @click="openAddBox">
					<image src="/static/addry.png" mode=""></image>
					<text>添加常用信息</text>
					<uni-icon type="arrowright" style='float: right;margin-top: 20upx;margin-right: 30upx;' size="22" color="rgba(167,167,167,1.00)"></uni-icon>
				</view>
			</view>
			<view class="renyuan-item" v-for="(item,index) in ryData" :key='index' >
				<view class="list">
					<view class="item" @click.stop="chooseRy(item)">
						<view class="item-info">
							<text class="name">{{item.name}}</text>
							<image v-if="item.choose" src="/static/duihao.png" mode=""></image>
						</view>
						<view class="item-info">
							<text class="label">联系方式</text>
							<text class="label">{{item.phone}}</text>
						</view>
						<view class="item-info">
							<text class="label">身份证</text>
							<text class="label">{{item.idNum}}</text>
						</view>
						<view class="line"></view>
						
					</view>
					<view class="item-right">
						<view class="bj" @click="editInfo(item)">
							<image src="/static/edit.png" mode="" ></image>
							<text>编辑</text>
						</view>
						<view class="delete">
							<image src="/static/del.png" mode=""></image>
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		data(){
			return{
				statusBarHeight:global.statusBarHeight + 'px',
				openAdd:false,
				addName:'',
				ryData:[
					{
						name:'陈乔坤',
						phone:'193****3655',
						idNum:'211***********3655',
						choose:true
					},
					{
						name:'段春阳',
						phone:'193****3655',
						idNum:'211***********3655',
						choose:false
					}
				]
			}
		},
		methods: {
			getStatusTop(){
				if(this.statusBarHeight < 20+'px'){
					this.statusBarHeight = 20 +'px'
				}
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			chooseRy(item){
				item.choose = true
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},300)
			},
			addCommit(){
				this.openAdd = false
			},
			openAddBox(){
				uni.navigateTo({
					url:'renyuanIdEdit'
				})
			},
			editInfo(item){
				uni.navigateTo({
					url:'renyuanIdEdit?name='+item.name+'&&phone='+item.phone+'&&idNum='+item.idNum
				})
			}
			
		},
		created(){
			
		},
		mounted() {
			this.getStatusTop();
		},
		components:{
			uniIcon
		}
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.head{
		width: 750upx;
		/* height: 124upx; */
		position: fixed;
		z-index: 2;
		height: auto;
		background: #FFFFFF;
	}
	
	/* .label{
		width: 110upx;
		font-size: 28upx;
		float: left;
		line-height: 60upx;
		color: rgba(153,153,153,1.00);
	} */
	.head-img{
		width: 79upx;
		height: 80upx;
		/* margin-top: 44upx; */
		float: left;
	}
	.head image{
		width: 36upx;
		margin-left: 29upx;
		margin-top:20upx;
		height: 36upx;
	}
	.head text{
		float: left;
		font-size: 30upx;
		font-weight: bold;
		line-height: 60upx;
		margin-top: 8upx;
	}
	.renyuan-area{
		width: 100%;
		height: auto;
		padding-top: 150upx;
	}
	.renyuan-item{
		width: 100%;
		height: auto;
		margin-top: 32upx;
	}
	.renyuan-label{
		width: 666upx;
		margin-left: 30upx;
		height: 80upx;
		padding-left: 24upx;
		color: rgba(182,182,182,1.00);
		line-height: 80upx;
		font-size: 28upx;
	}
	.add-box{
		width: 690upx;
		height: 80upx;
		margin-left: 30upx;
		color: rgba(46,142,255,1.00);
		
		font-size: 30upx;
		line-height: 80upx;
		border-radius: 20upx;
		background: rgba(255,255,255,1);
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
	}
	.add-box text{
		float: left;
		
	}
	.add-box image{
		width: 30upx;
		height: 30upx;
		margin-left: 29upx;
		margin-top: 25upx;
		margin-right: 32upx;
		float: left;
	}
	.list{
		width: 666upx;
		margin-left: 30upx;
		padding-left: 24upx;
		font-size: 28upx;
		border-radius: 20upx;
		height: 300upx;
		background: rgba(255,255,255,1);
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
	}
	.item{
		width: 100%;
		padding-top: 20upx;
		height: auto;
		display: table;
		line-height: 100upx;
	}
	.item-info{
		height: 60upx;
		width: 100%;
		font-size: 28upx;
	}
	.item-info image{
		width: 29upx;
		height: 21upx;
		float: left;
		margin-top: 16upx;
		/* margin-left: 24upx; */
	}
	.name{
		width: 150upx;
		font-size: 28upx;
		line-height: 60upx;
		float: left;
	}
	.label{
		width: 150upx;
		height: 40upx;
		line-height: 60upx;
		display: block;
		float: left;
		color: rgba(153,153,153,1.00);
	}
	.item-right{
		margin-top: 10upx;
		width: 630upx;
		border-top: rgba(246,246,246,1.00) solid 2upx ;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		height: 100upx;
		color: rgba(102,102,102,1.00);
	}
	.bj{
		width: 120upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		float: left;
	}
	.bj text{
		width: 100upx;
		line-height: 100upx;
	}
	.bj image{
		width: 24upx;
		height: 24upx;
		margin-top: 38upx;
		margin-right: 13upx;
	}
	.delete{
		width: 120upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		float: right;
	}
	.delete image{
		width: 22upx;
		height: 24upx;
		margin-top: 38upx;
		margin-right: 13upx;
	}
	.delete text{
		width: 100upx;
		line-height: 100upx;
	}
</style>
